<template>
  <div id="char" style="width: 800px; height: 400px"></div>
</template>

<script lang='ts' setup>
import {onMounted, onUnmounted} from 'vue';
// Echarts 为init（dom元素后的类型）
// EChartsOption 为 option 的类型
import {EChartOption, ECharts, init} from 'echarts';
import {callbacks} from "../../../utils/webSocket";
import {getOnLinePerPon} from "../../../service/AccountApi";

const x:string[] = []
const value:number[] = []

const option:EChartOption = {
  xAxis: {
    type: 'category',
    data: x
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: value,
      type: 'line'
    }
  ]
};

let timer:NodeJS.Timer;

onMounted(() => {
  const charEle = document.getElementById('char') as HTMLElement;
  const charEch: ECharts = init(charEle);
  charEch.setOption({
    title: {
      text: '实时在线人数统计',
      left: 'center'
    },
  })
  getOnLinePerPon().then(d=>{
    if(d.data.code === '200'){
      x.push(d.data.date.now)
      value.push(d.data.date.size)
      charEch.setOption(option);
    }
  })


  callbacks.showOnline = messageDto=>{
    //解析数据
    let parse:any = JSON.parse(messageDto.message);
    if(x.length === 10){
      x.push(parse.date)
      x.shift()

      value.push(parse.count)
      value.shift()
    }else{
      x.push(parse.date)
      value.push(parse.count)
    }

    charEch.setOption(option)
  }
});

//关闭webSocket
onUnmounted(()=> {
  clearInterval(timer);
})

</script>

<style scoped>

</style>
